
d3.csv('./data/村级人口及收入分布统计.csv').then(function(data) {
    data.forEach(function(d) {
        const lat = parseFloat(d.纬度);
        const lng = parseFloat(d.经度);
        
        // 获取总投资和总发电量数据
        const averageIncome = parseFloat(d['人均纯收入']);  
        const totalPeople = parseFloat(d['人口总数']);
        
         // 根据总投资来决定图标的颜色
        const iconColor = getVillageIconColor(averageIncome);
        
        // 根据总发电量来决定图标的大小
        const iconSize = getVillageIconSize(totalPeople);

        // 创建一个 Popup
        const popup = new mapboxgl.Popup({ offset: 50 })
            .setHTML(`
                <strong>电站名称:</strong> ${d.电站名称}<br>
                <strong>经纬度:</strong> ${lat.toFixed(2)}, ${lng.toFixed(2)}<br>
            `); // 弹出框内容

        // 创建标记并绑定 Popup
        let maker = new mapboxgl.Marker({
            element: createCustomIcon(iconColor,iconSize,)
        })
            .setLngLat([lng, lat]) // 设置经纬度
            .setPopup(popup) // 绑定弹出框
            .addTo(map);

        
// 设置标记的 z-index，确保它在其他标记上方
maker.getElement().style.zIndex = '100';
        
       
        
    });
}).catch(function(error) {
    console.error('读取 CSV 文件失败:', error);

});

// 创建一个自定义图标的函数
function createCustomIcon(color,size, backgroundImage) {
    // 创建一个新的 div 元素来作为标记的图标
    const div = document.createElement('div');
    div.className = 'custom-marker';

    if (backgroundImage) {
        div.style.backgroundImage = `url(${backgroundImage})`;  // 设置背景图
        div.style.backgroundSize = '60%';  // 保证背景图充满整个标记
        div.style.backgroundPosition = 'center';  // 将背景图居中显示
        div.style.backgroundRepeat = 'no-repeat';  // 防止背景图重复
    }


    div.style.backgroundColor = color;
    div.style.width = `${size}px`;  // 设置图标大小
    div.style.height = `${size}px`; // 设置图标大小
    div.style.borderRadius = '50%'; // 使图标变为圆形
    

    div.style.zIndex = '0';

    return div;
}
// 根据人均纯收入决定颜色
function getVillageIconColor(investment) {
const colorArray = [
{ threshold: 20000, color: '#326db6' },  
{ threshold: 22000, color: '#75b5dc' },  
{ threshold: 24000, color: '#e8edf1' },    
{ threshold: 26000, color: '#eabaa1' },    
{ threshold: 28000, color: '#d16d5b' },    
{ threshold: 30000, color: '#b7282e' },    
];
for (let i = 0; i < colorArray.length; i++) {
if (investment < colorArray[i].threshold) {
    return hexToRgba(colorArray[i].color, 0.8);
}
}
return hexToRgba(colorArray[colorArray.length - 1].color, 0.8); 
}

// 根据总发电量决定大小
function getVillageIconSize(generation) {
// 假设总发电量的范围是 [minGeneration, maxGeneration]，你可以根据数据调整这两个值
const minGeneration = 1;    // 最小总发电量
const maxGeneration = 500;    // 最大总发电量

// 确保总发电量在合理范围内
if (generation < minGeneration) {
generation = minGeneration;
} else if (generation > maxGeneration) {
generation = maxGeneration;
}

// 计算图标大小，映射到 10px 到 40px 之间
const size = 10 + (generation - minGeneration) / (maxGeneration - minGeneration) * (40 - 20);

return Math.round(size);  // 返回四舍五入后的大小
}



// 将十六进制颜色转换为 rgba 格式
function hexToRgba(hex, alpha) {
    let r = parseInt(hex.slice(1, 3), 16);
    let g = parseInt(hex.slice(3, 5), 16);
    let b = parseInt(hex.slice(5, 7), 16);
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}